<template>
    <div style="height: 100%;">
        <div id="zhaomingChart" style="width: 100%;height: 100%;"></div>
    </div>
</template>
<script>

import echarts from 'echarts'
import homeService from "../../../../services/homeService"

export default {

	mounted(){
		this.initData()
	},

	methods: {

		drawYiChangChart(){
			// 基于准备好的dom，初始化echarts实例
			let zhaomingChart = echarts.init(document.getElementById('zhaomingChart'), 'dark')
			// window.onresize = yichangChart.resize;
            window.addEventListener("resize", () => { zhaomingChart.resize();});
			// 绘制图表
			let option = {
					backgroundColor:'',
					tooltip : {
							trigger: 'axis',
							axisPointer : {            // 坐标轴指示器，坐标轴触发有效
									type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
							}
					},
					// legend: {
							// data: ['设备总数', '异常数量'],
							// width: 50
					// },
					grid: {
							left: '3%',
							right: '4%',
							bottom: '3%',
							// containLabel: true,
							// x: 50
					},
					xAxis:  {
							type: 'value'
					},
					yAxis: {
							type: 'category',
							data: this.yAxis
					},
					series: [
							{
									name: '照明技术指标',
									type: 'pie',
                  radius: ["40%", "55%"],
									data: [
                    {value: 2, name: '未达标'},
                    {value: 98, name: '达标'},

                  ]
							}
					]
			};
			zhaomingChart.setOption(option);

    },

		initData(){
      let _this = this

      //初始化
      homeService.zixitongyichang().then(res => {
        if (res.code == 0) {
          _this.yAxis = []
          _this.total = []
          _this.fault = []
          res.data.map(item => {
            _this.yAxis.push(item.facilityName)
            _this.total.push(item.count)
            _this.fault.push(item.faultCount)
          })
          _this.drawYiChangChart()
        }
      })
    },
	}
}
</script>
<style lang="scss" scoped>

</style>
